<template>
  <page-header-wrapper :title="false">
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item label="标题" required>
                <a-input :allowClear="true" v-model="queryParam.title" placeholder="请输入标题" :maxLength="10"/>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <a-form-item label="内容" required>
          <RichText :loading="isLoading" ref="richText" :editContent="ruleContent" @btnGetTxt="btnSetTxt" :isLimitNumber="5000"></RichText>
        </a-form-item>
        <a-button style="margin-top: 10px;" @click="onSetRule" type="primary">保存</a-button>
      </div>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import RichText from '@/components/RichText/RichText'
import { message, notification } from 'ant-design-vue'
import { getRules, setRules } from '@/api/card'
let self
export default {
  name: 'AdminRules',
  components: {
    RichText
  },
  data () {
    return {
      ruleContent: '',
      isLoading: false,
      queryParam: {
        title: undefined
      }
    }
  },
  filters: {

  },
  created () {
    self = this
  },
  computed: {
  },
  mounted () {
    this.onGetRule()
  },
  methods: {
    btnSetTxt (content) {
      this.ruleContent = content
    },
    onGetRule () {
      // 获取积分规则
      self.isLoading = true
      getRules().then((res) => {
        self.isLoading = false
        // self.ruleContent = res.content
        this.queryParam.title = res.title
        this.$refs.richText.init(res.content)
      }).catch(() => {
        self.isLoading = false
      })
    },
    onSetRule () {
      // 获取积分规则
      if (this.queryParam.title === undefined || this.queryParam.title === '') {
        notification.open({
          type: 'warning',
          message: '提示',
          description: '请填写标题！'
        })
        return
      }
      if (self.ruleContent === undefined || self.ruleContent === '') {
        notification.open({
          type: 'warning',
          message: '提示',
          description: '请填写细则！'
        })
        return
      }
      self.isLoading = true
      const from = {
        content: self.ruleContent,
        title: this.queryParam.title
      }
      console.log(from)
      setRules(from).then((res) => {
        self.isLoading = false
        message.success('保存成功')
      }).catch(() => {
        self.isLoading = false
      })
    }
  }
}
</script>

<style scoped>
</style>
